<template>
	<view class="container">
		<view class="header">
			<text class="title">{{ agencyName }}</text>
			<text class="sub">总返现金额：¥{{ totalCashback.toFixed(2) }}</text>
		</view>

		<view class="order-list">
			<view class="order-item" v-for="order in orders" :key="order.id">
				<view class="order-info">
					<view class="order-name">订单编号：{{ order.code }}</view>
					<view class="order-time">{{ order.date }}</view>
				</view>
				<view class="order-amount">¥{{ order.amount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			agencyId: null,
			agencyName: '',
			totalCashback: 0,
			orders: []
		};
	},
	onLoad(options) {
		this.agencyId = options.id;
		this.agencyName = options.name || '门店详情';
		this.loadMockData();
	},
	methods: {
		loadMockData() {
			// 模拟接口返回数据
			const mockData = {
				'1': [
					{ id: 1, code: 'ORD20250801A', date: '2025-08-01 14:22', amount: 52.5 },
					{ id: 2, code: 'ORD20250801B', date: '2025-08-01 16:40', amount: 30 }
				],
				'3': [
					{ id: 3, code: 'ORD20250731X', date: '2025-07-31 10:10', amount: 64 },
					{ id: 4, code: 'ORD20250801Y', date: '2025-08-01 13:25', amount: 40 }
				]
			};

			this.orders = mockData[this.agencyId] || [];
			this.totalCashback = this.orders.reduce((sum, item) => sum + item.amount, 0);
		}
	}
};
</script>

<style scoped>
.container {
	background-color: #000;
	color: #fff;
	min-height: 100vh;
	padding: 32rpx;
	box-sizing: border-box;
}
.header {
	margin-bottom: 40rpx;
}
.title {
	font-size: 36rpx;
	font-weight: bold;
}
.sub {
	font-size: 28rpx;
	color: #ffcf00;
	margin-top: 12rpx;
}

.order-list {
	border-radius: 16rpx;
	overflow: hidden;
}
.order-item {
	background-color: #1a1a1a;
	padding: 24rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.order-info .order-name {
	font-size: 28rpx;
}
.order-info .order-time {
	font-size: 24rpx;
	color: #aaa;
	margin-top: 6rpx;
}
.order-amount {
	font-size: 30rpx;
	color: #ffcf00;
}
</style>
